@charset "UTF-8";
$vm_base:375;  //设计图的宽度
@function vw($px) {
  @return ($px / $vm_base) * 100vw;
}
html{
  height: 100%;
}
*{
  margin: 0;
  padding: 0;
  font-family: '微软雅黑';
}
li{
  list-style: none;
}
a{ text-decoration: none;}
body{
  height: 100%;
  @mixin br{
    border:1px solid red;
  }
  div{
    box-sizing: border-box;
  }
  .bill_details{
    height: 100%;
    display: flex;
    flex-direction: column;
    .header{
      @include br;
      background: #ffb001;
      color:#ffffff;
      height: 97px;
      margin-bottom: vw(21);
      .bill_month{
        font-size: vw(20);
        height: vw(55);
        text-align: center;
        line-height: vw(55);
      }
      .bill_room{
        padding-left: vw(21);
        height: vw(42);
        font-size: vw(23);
        line-height: vw(42);
      }
    }
    .content{
      flex-grow: 1;
      height: 0;
      .main{
        width: vw(358);
        margin: 0 auto;
        height: vw(358);
        box-shadow: 2px 2px 45px -19px #000000;
        padding: vw(22) vw(19);
        .Titl{
          border-bottom: 1px solid #b8b8b8;
          .titl{
            font-size: vw(19);
            color:#323232;
            text-align: left;
          }
          .prize{
            height: vw(39);
            font-size: vw(13);
            color:#b8b8b8;
            text-align: left;
            line-height: vw(39);
          }

        }
        .item{
          line-height: vw(42);
          position: relative;
          text-align: left;
          padding: 0 vw(14);
          border-bottom: 1px solid #b8b8b8;
          font-size: vw(15);
          color: #020202;
          i{
            width: vw(13);
            height: vw(13);
            line-height: vw(13);
            font-size: vw(13);
            color:#b8b8b8;
            position: absolute;
            top: vw(14);
            right: 0;
          }
          .cur{
            position: absolute;
            line-height: vw(42);
            font-size: vw(15);
            color: #020202;
            top: 0;
            right: vw(14);
          }
          .history{
            line-height: vw(39);
            text-align: left;
            .cur_m{
              display: inline-block;
              margin-left: vw(37);
            }
          }
        }
        .item:after{
          content: '';
          background-color: #4971f8;
          position: absolute;
          width: vw(3);
          height: vw(14);
          left: 0;
          top: vw(14);
        }
      }
    }
    .footer{
      @include br;
      height: 54px;
      padding: vw(12) vw(43) 0 vw(43);
      .nav{
        .nav_item{
          float: left;
          width: vw(50);
          margin-right: vw(28);
          text-align: center;
          i{
            font-size: vw(21);
            line-height: vw(21);
            color:#8e8e8e;
            text-align: center;
          }
          li{
            margin-top: vw(5);
            text-align: center;
            font-size: vw(8);
            line-height: vw(8);
          }
        }
      }
    }
  }
}